<template>
	<view class="container">
		<view class="top_bg_box" :style="{'paddingTop':menuButtonInfo.top +'px'}">
			<image src="@/static/images/xzg2.png" mode="heightFix" style="margin-left: 30rpx;height: 56rpx;"
				:style="{'width': menuButtonInfo.height*2 +'px'}"></image>
			<view class="times">营业时间：{{bannerInfo.businesshours}}</view>
			<view class="top_box">
				<view class="search_box" @click="$gourl('/pages/index/search')">
					<u-icon name="search" size="40" color="#707070"></u-icon>
					<input type="text" placeholder="搜索内容" disabled="" />
					<view class="search_button">搜索</view>
				</view>
			</view>
		</view>
		<view class="seckill_box">
			<view class="title">
				<image src="@/static/images/seckillTitle.png" mode=""></image>
				<view class="title_btn" @click="$gourl('/pages/index/hotList')">更多>></view>
			</view>
			<view class="ad_box" v-if="couponList.length > 0">
				<!-- <image :src="adImg.thumb" alt="" /> -->
				<view class="left_box">
					<!-- <view class="money">105.00<text>元</text></view> -->
					<view class="money" style="font-size: 28rpx;margin-bottom: 10rpx;">全场抵扣券</view>
					<view class="lq_btn" @click="$gourl('/minePage/ticketList')">立即领取</view>
				</view>
				<view class="right_box">
					<view class="quan_big_box">
						<view class="quan_box" v-for="(item,index) in couponList" :key="index">
							<view class="money"><text>￥</text>{{item.coupon_price}}</view>
							<view class="man">满{{item.use_min_price}}元可用</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="list_box" v-for="(item,index) in secKillList" :key="index" @click="godetails(item)">
					<image :src="item.image"></image>
					<view class="goods_name">{{item.store_name}}</view>
					<vie class="seckill_box_pay">
						<view class="left">
							<view class="renzhen"><text>￥</text>{{item.price}}</view>
							<view class="small"><text>￥</text>{{item.ot_price}}</view>
						</view>
						<view class="right" @click.stop="goodsClick(item)">
							选它
						</view>
					</vie>
				</view>
			</view>
		</view>
		<!-- <view class="swiper_box">
			<u-swiper :list="swiperList" height="344" border-radius="0" @click="bannerClick"></u-swiper>
		</view> -->
		<view class="option_box">
			<view class="options">
				<view class="option" v-for="(item,index) in optionList" :key="index">
					<view class="list" v-for="(item2,index2) in item" :key="item2.id" @click="goType(index,index2)">
						<view class="img_box">
							<image :src="item2.pic" />
						</view>
						<view class="text">{{item2.cate_name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="top_img" style="padding-top: 0;">
			<image :src="bannerInfo.index_center_banner[0].img" mode="widthFix"></image>
		</view>
		<view class="hotZq">
			<view class="swiper_box">
				<u-swiper :list="swiperList" height="460" border-radius="0" @click="bannerClick"></u-swiper>
			</view>
			<view class="hot_right_box">
				<view class="hot_right_swiper">
					<view class="title">
						<view class="txt">特惠专区</view>
						<view class="more" @click="$gourl('/pages/index/hotList')">更多</view>
					</view>
					<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :vertical="true"
						:duration="500">
						<swiper-item v-for="(item,index) in newUSerList" :key="index">
							<view class="swiper_item">
								<view class="swiper_item_goods" v-for="(item2,index2) in item" :key="index2"
									@click="godetails(item2)">
									<image :src="item2.image" mode=""></image>
									<view class="position_box">
										<view class="big_price"><text>￥</text>{{item2.price}}</view>
										<view class="small_price"><text>￥</text>{{item2.ot_price}}</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="hot_right_swiper" style="margin-top: 22rpx;" @click="$gourl('/minePage/ticketList')">
					<view class="title">
						<view class="txt">领券中心</view>
						<!-- <view class="more" @click="$gourl('/pages/index/hotList')">更多</view> -->
					</view>
					<view style="width: 340rpx;height: 168rpx;">
						<image src="/static/images/index11.png" mode="" style="width: 340rpx;height: 168rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="shop_box">
			<view class="tab_boxs">
				<u-tabs :list="tabList" name="cate_name" bg-color="#f5f5f5" :current="current" @change="change"
					active-color="#EA3D37" bar-height="6" bar-width="40"></u-tabs>
			</view>
			<view class="commodity_box">
				<view class="pu_box">
					<view class="list" v-for="item in goodsArr[0]" :key="item" @click="godetails(item)">
						<image :src="item.image" mode="widthFix"></image>
						<view class="text_box">
							<view class="name">{{item.store_name}}</view>
							<!-- <view class="remake">2222</view> -->
							<view class="price_text">
								<text class="big"><text>￥</text>{{item.price}}</text>
								<!-- <text class="small" v-if="item.ot_price"><text>￥</text>{{item.ot_price}}</text> -->
								<view class="addcart" @click.stop="goodsClick(item)">
									立即购买
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pu_box">
					<view class="list" v-for="item in goodsArr[1]" :key="item" @click="godetails(item)">
						<image :src="item.image" mode="widthFix"></image>
						<view class="text_box">
							<view class="name">{{item.store_name}}</view>
							<!-- <view class="remake">2222</view> -->
							<view class="price_text">
								<text class="big"><text>￥</text>{{item.price}}</text>
								<!-- <text class="small" v-if="item.ot_price"><text>￥</text>{{item.ot_price}}</text> -->
								<view class="addcart" @click.stop="goodsClick(item)">
									立即购买
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="addCar" mode="bottom" border-radius="20" @close="maskClose" :closeable="true">
			<view class="con">
				<view class="top_img">
					<image :src="goodsDetail.content_banner[0].img" mode="widthFix"></image>
				</view>
				<view class="con_bg">
					<view class="mall_info">
						<image
							:src="skuValue[skuCurrent].image!==''?skuValue[skuCurrent].image:goodsDetail.storeInfo.image"
							mode=""></image>
						<view class="infos">
							<view class="name">{{goodsDetail.storeInfo.store_name}}{{skuValue[skuCurrent].suk}}</view>
							<view class="specs">库存：{{skuValue[skuCurrent].stock}}</view>
							<view class="price">
								<view class="big"><text>￥</text>{{skuValue[skuCurrent].price}}</view>
								<view class="small"><text>￥</text>{{skuValue[skuCurrent].ot_price}}</view>
							</view>
						</view>
					</view>
					<view class="sku_box">
						<view class="title">规格</view>
						<scroll-view scroll-x="true">
							<view class="guigebox">
								<view class="list" v-for="(item,index) in skuValue" :key="index"
									:class="skuCurrent==index?'active':''" @click="skuClick(item,index)">
									<image :src="item.image||goodsDetail.storeInfo.image" mode=""></image>
									<view class="text"
										style="background: #fff !important;font-size: 24rpx;font-weight: normal;">
										{{item.suk}}
									</view>
									<view class="text" style="font-size: 20rpx;height: 40rpx;font-weight: normal;">
										￥{{item.price}}/瓶</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="sku_box">
						<view class="title">
							<view class="txt">冰冻</view>
							<view class="sku"><text style="margin-right: 10rpx;">共{{bdNumber + cwNumber}}瓶</text>|<text
									class="ice">冰冻{{bdNumber}}</text>常温{{cwNumber}}</view>
						</view>
						<view class="sku bing">
							<view class="list" v-for="(item,index) in skuValue[skuCurrent].wdInfo" :key="index"
								v-if="item !== '自定义冰冻数量'" :class="bdCurrent==index?'active':''"
								@click="bdClick(item,index)">
								{{item}}
							</view>
						</view>
						<view class="input_box list" :class="bdCurrent == 3 ? 'active' : ''"
							v-if="skuValue[skuCurrent].wdInfo.includes('自定义冰冻数量')||(skuValue[skuCurrent].wdInfo.length>1 && (bdNumber + cwNumber)>1)"
							@click="bdClick('自定义冰冻数量',3)">
							<view>自定义冰冻数量</view>
							<view style="flex: 1;display: flex;justify-content: space-between;padding-right: 20rpx;"
								v-if="bdCurrent == 3">
								<text style="font-weight: normal;margin-right: 20rpx;">全冰</text> <u-slider
									v-model="bfNumber" setup="1" height="10" style="flex: 1;"
									@moving="sliderEnd"></u-slider> <text
									style="font-weight: normal;margin-left: 20rpx;">不冰</text>
							</view>
						</view>
					</view>
					<view class="number">
						购买数量
						<u-number-box v-model="buyNumber" @change="valChange"
							:min="Number(skuValue[skuCurrent].buy_num)"></u-number-box>
					</view>
					<view class="btns">
						<view class="add_cart" @click="addCarClick('0')">加入购物车</view>
						<view class="buy_btn" @click="addCarClick('1')">立即购买</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <u-loadmore :status="status" /> -->
		<!-- <view class="mask_box" v-if="false">
			<view class="mask_con">
				<image src="@/static/images/quan/1.svg" mode="widthFix" class="quan_box2"></image>
				<view class="lq_title">新人见面礼</view>
				<view class="lq_title_small">超级惊喜红包神券</view>
				<view class="quan_option_box">
					<view class="quan_option" v-for="(item,index) in couponList" :key="index">
						<view class="quan_option_left">
							<view>
								<view class="money"><text>￥</text>{{item.coupon_price}}</view>
								<view class="man">满{{item.use_min_price}}元可用</view>
							</view>
						</view>
						<view class="quan_option_right">
							<view>
								<view class="money">满减红包</view>
								<view class="man" v-if="item.end_time == '不限时'">{{item.end_time}}</view>
								<view class="man" v-else>{{item.end_time}}截止</view>
							</view>
						</view>
					</view>
				</view>
				<view class="lq_txt">惊喜福利来袭，限时可用</view>
				<image src="@/static/images/quan/3.png" mode="widthFix" class="btn_box"></image>
				<view class="lq_btn_txt" @click="$gourl('/minePage/ticketList')">一键领取</view>
				<image src="@/static/images/quan/3.svg" class="lq_btn" mode="widthFix"></image>
				<view class="close" @click="hbMask = false">
					<image
						src=""
						mode="widthFix"></image>
				</view>
			</view>
		</view> -->
		<view class="mask_box" v-if="hbMask">
			<view class="mask_con">
				<u-swiper :list="bannerInfo.index_top_banner" name="img" height="660" border-radius="30"
					@click="bannerClick"></u-swiper>
				<view class="close" @click="hbMask = false">
					<image
						src=""
						mode="widthFix"></image>
				</view>
			</view>
		</view>
		<u-loadmore v-if="status !== 'nomore'" :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addCar: false,
				hbMask: false,
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(), //胶囊按钮信息
				list: [{
					name: '精品推荐'
				}, {
					name: '行业热销'
				}, {
					name: '新品上架'
				}, {
					name: '网红专区'
				}],
				current: 0,
				swiperList: [],
				adImg: null,
				optionList: '',
				goodsList: [],
				couponList: [],
				secKillList: [],
				newUSerList: [],
				page: 1,
				pageSize: 10,
				total: 1,
				count: 1,
				status: 'loadmore',
				goodsType: 'recommend',
				isLogin: false,
				goodsInfo: null,
				skuCurrent: 0,
				bdCurrent: 0,
				bdNumber: 0,
				bfNumber: 0,
				cwNumber: 0,
				buyNumber: 1,
				isRenzheng: false,
				goodsData: [],
				goodsDetail: null,
				skuValue: [{
					wdInfo: []
				}],
				selectWd: '全冰',
				selectSku: null,
				tabList: [],
				typeId: '',
				goodsArr: [],
				bannerInfo: null,
			}
		},
		onShow() {
			if (uni.getStorageSync('userToken')) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
		},
		onLoad() {
			this.getIndexData()
			this.getCouponList()
			this.getBanner()
			this.hbMask = true
			// this.getGoodsecKill()
			// this.getGoodsList()
		},
		onReachBottom() {
			if (this.goodsList.length < this.pageSize || this.status == 'nomore') return;
			this.status = 'loading';
			this.page++
			this.getGoodsList()
		},
		methods: {
			getBanner() {
				this.$allApi.getBanner().then(res => {
					this.bannerInfo = res.data
				})
			},
			goType(index, index2) {
				console.log(index, index2);
				let num = index2
				if (index == 1) {
					if (index2 == 0) num = 5
					else if (index2 == 1) num = 6
					else if (index2 == 2) num = 7
					else if (index2 == 3) num = 8
					else if (index2 == 4) num = 9
				}
				getApp().selectNum = num
				this.$gourl('/pages/index/typeList', 2)
			},
			maskClose() {
				this.goodsDetail = null
				this.skuValue = []
				this.selectSku = null
				this.skuCurrent = 0
			},
			bdClick(item, index) {
				this.bdCurrent = index
				this.selectWd = item
				this.valChange()
			},
			valChange() {
				console.log(this.selectWd);
				if (this.selectWd == '全冰') {
					this.bdNumber = this.buyNumber * this.selectSku.num
					this.cwNumber = 0
				} else if (this.selectWd == '一半冰' || this.selectWd == '一半冰一半不冰') {
					this.bdNumber = Math.ceil(this.buyNumber * this.selectSku.num / 2)
					this.cwNumber = this.buyNumber * this.selectSku.num - this.bdNumber
				} else if (this.selectWd == '常温') {
					this.bdNumber = 0
					this.cwNumber = this.buyNumber * this.selectSku.num
				} else if (this.selectWd == '自定义冰冻数量') {
					this.sliderEnd()
				}
			},
			sliderEnd() {
				let cs = this.bfNumber / 100
				this.cwNumber = Math.ceil(this.buyNumber * this.selectSku.num * cs)
				this.bdNumber = this.buyNumber * this.selectSku.num - this.cwNumber
			},
			skuClick(item, index) {
				this.selectSku = item
				this.skuCurrent = index
				this.bdCurrent = 0
				this.bfNumber = 0
				this.buyNumber = this.skuValue[index].buy_num
				this.selectWd = this.skuValue[index].wdInfo[0]
				this.valChange()
			},
			addCarClick(type) {
				this.$allApi.addCar({
					productId: this.selectSku.product_id,
					cartNum: this.buyNumber,
					uniqueId: this.selectSku.unique,
					bd_value: JSON.stringify({
						bd: this.bdNumber,
						cw: this.cwNumber,
						type: this.selectWd,
						bfNumber: this.bfNumber / 100
					}),
					new: type
				}).then(res => {
					this.addCar = false
					this.bdNumber = 0
					this.cwNumber = 0
					this.bdCurrent = 0
					this.buyNumber = 1
					this.bfNumber = 0
					this.bdCurrent = 0
					this.selectWd = '全冰'
					this.skuValue = [{
						wdInfo: []
					}]
					if (type == '0') {
						this.$u.toast('添加成功')
					} else {
						this.$gourl(`/mallPage/confirmOrder?car_id=${res.data.cartId}`)
					}
				})
			},
			goodsClick(item) {
				this.goodsInfo = item
				this.getGoodsData(item.id)
			},
			getGoodsData(id) {
				this.$allApi.getGoodsDetail({
					id: id
				}).then(res => {
					this.goodsDetail = res.data
					this.skuValue = []
					for (let item in res.data.productValue) {
						this.skuValue.push(res.data.productValue[item])
					}
					for (let item of this.skuValue) {
						item.wdInfo = []
						console.log(item.wd_value.indexOf(','));
						if (item.wd_value.indexOf(',') !== -1) {
							item.wdInfo = item.wd_value.split(',')
						} else if (item.wd_value.indexOf('，') !== -1) {

							item.wdInfo = item.wd_value.split('，')
						}
					}
					this.selectSku = this.skuValue[0]
					this.buyNumber = this.skuValue[0].buy_num
					this.selectWd = this.selectSku.wdInfo[0]
					this.valChange()
					this.addCar = true
				})
			},
			async getGoodsList() {
				await this.$allApi.getGoodsList({
					page: this.page,
					limit: this.pageSize,
					cid: this.typeId,
				}).then(res => {
					if (res.data.length < this.pageSize) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
					this.goodsList = [...this.goodsList, ...res.data]
					let arr1 = []
					let arr2 = []
					for (let i = 0; i < this.goodsList.length; i++) {
						if (i % 2) {
							arr2.push(this.goodsList[i])
						} else {
							arr1.push(this.goodsList[i])
						}
					}
					this.goodsArr = [arr1, arr2]
				})
			},
			async getCouponList() {
				await this.$allApi.getCouponList({
					page: 1,
					limit: 2,
				}).then(res => {
					console.log(res);
					this.couponList = res.data
					for (let item of this.couponList) {
						if (!item.is_use) {
							this.hbMask = true
						}
					}
				})
			},
			chunkArray(arr) {
				let chunks = [];
				// 提取前五个元素
				let firstFive = arr.slice(0, 5);
				// 提取后五个元素
				let lastFive = arr.slice(-5);

				chunks.push(firstFive);
				chunks.push(lastFive);
				return chunks;
			},
			bannerClick(e) {},
			async getIndexData() {
				await this.$allApi.getIndexData().then(res => {
					console.log(res);

					let banners = res.data.banner
					for (let item of banners) {
						console.log(item);
						item.image = ''
						item.image = item.pic
					}
					this.swiperList = banners
					let lists = res.data.fastList
					this.tabList = lists.reverse()
					this.typeId = lists[0].id
					this.optionList = this.chunkArray(lists, 5)
					this.goodsData = res.data.info
					// this.goodsList = this.goodsData.bastList
					this.secKillList = res.data.likeInfo
					this.newUSerList = this.killArray(res.data.likeInfo, 2)
					this.getGoodsList()
					// this.adImg = res.data.advertise[0]
				})
			},

			killArray(arr, size) {
				const result = [];
				for (let i = 0; i < arr.length; i += size) {
					result.push(arr.slice(i, i + size));
				}
				return result;
			},
			qiege() {
				let arr1 = []
				let arr2 = []
				for (let i in this.goodsList.list) {
					if (i % 2) {
						arr1.push(this.goodsList[i])
					} else {
						arr2.push(this.goodsList[i])
					}
				}
				this.goodsListTwo[arr1, arr2]
			},
			change(index) {
				this.current = index;
				// switch (index) {
				// 	case 0:
				// 		this.goodsList = this.goodsData.bastList;
				// 		break;
				// 	case 1:
				// 		this.goodsList = this.goodsData.benefit;
				// 		break;
				// 	case 2:
				// 		this.goodsList = this.goodsData.firstList;
				// 		break;
				// 	default:
				// 		this.goodsList = this.goodsData.isgood;
				// 		break;
				// }

				// this.goodsList = []
				// if (index = 0) {
				// 	this.goodsType = 'recommend'
				// } else if (index == 1) {
				// 	this.goodsType = 'hot'
				// } else if (index == 2) {
				// 	this.goodsType = 'newpro'
				// } else if (index == 3) {
				// 	this.goodsType = 'Internetcelebrity'
				// }
				this.typeId = this.tabList[index].id
				this.page = 1
				this.goodsList = []
				this.getGoodsList()
			},
			godetails(item) {
				this.$gourl('/mallPage/goodsDetails?id=' + item.id, 4)
			},
		}
	}
</script>


<style>
	.u-drawer-bottom {
		background: none !important;
	}
</style>
<style lang="scss" scoped>
	.times {
		color: #fff;
		font-size: 24rpx;
		padding-left: 20rpx;
	}

	.mask_box {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .5);

		.mask_con {
			width: 560rpx;
			position: relative;
			z-index: 100;

			.close {
				position: absolute;
				bottom: -80rpx;
				left: 0;
				width: 560rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.quan_option_box {
				position: absolute;
				width: 448rpx;
				top: 430rpx;
				left: 58rpx;
				height: 300rpx;

				.quan_option {
					width: 448rpx;
					height: 132rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: url(@/static/images/quan/2.png) no-repeat center;
					margin-bottom: 20rpx;

					.quan_option_left,
					.quan_option_right {
						height: 132rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.quan_option_left {
						width: 196rpx;
						text-align: center;

						.money {
							font-size: 42rpx;
							font-weight: bold;
							color: #fff;

							text {
								font-size: 22rpx;
							}
						}

						.man {
							font-size: 20rpx;
							color: #fff;
							margin-top: 6rpx;
						}
					}

					.quan_option_right {
						flex: 1;
						text-align: center;

						.money {
							font-size: 32rpx;
							color: #fff;
						}

						.man {
							font-size: 20rpx;
							color: #fff;
							margin-top: 6rpx;
						}
					}
				}
			}

			.lq_title {
				position: absolute;
				width: 448rpx;
				top: 310rpx;
				left: 58rpx;
				text-align: left;
				font-size: 48rpx;
				font-weight: bold;
				color: #f91620;
				text-align: center;
				z-index: 103;
			}

			.lq_title_small {
				position: absolute;
				width: 448rpx;
				top: 380rpx;
				left: 58rpx;
				text-align: left;
				font-size: 24rpx;
				color: #d4893a;
				text-align: center;
				z-index: 103;
			}

			.lq_txt {
				position: absolute;
				width: 448rpx;
				bottom: 130rpx;
				left: 58rpx;
				text-align: left;
				font-size: 28rpx;
				color: #f9e6a2;
				text-align: center;
				z-index: 103;
			}

			.lq_btn_txt {
				position: absolute;
				width: 448rpx;
				bottom: 50rpx;
				left: 58rpx;
				font-size: 40rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				color: #fA3D37;
				z-index: 103;
			}

			.lq_btn {
				position: absolute;
				width: 448rpx;
				bottom: 50rpx;
				left: 58rpx;
				z-index: 102;
			}

			.btn_box {
				width: 544rpx;
				position: absolute;
				bottom: 0;
				left: 8rpx;
				z-index: 101;
			}

			.quan_box2 {
				width: 560rpx;
			}
		}
	}

	.top_img {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
	}

	.con {

		.con_bg {
			background: #F6F6F6;
			padding-bottom: 30rpx;
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 45rpx;
			overflow: hidden;

			view {
				flex: 1;
				height: 90rpx;
				background: #000000;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}

			.buy_btn {
				background: #DB3E3F;
			}
		}

		.number {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			border-top: 1px solid #f3f3f3;
			background: #fff;
			margin: 20rpx 0;
		}

		.sku_box {
			margin-top: 12rpx;
			padding: 0 20rpx;
			background: #fff;
			margin-top: 20rpx;
			padding: 20rpx;
			font-size: 28rpx;

			.input_box {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border: 1px solid #f6f6f6;
				border-radius: 10rpx;

				view {
					width: 236rpx;
					height: 60rpx;
					border-radius: 10rpx;
					background: #F6F6F6;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				input {
					flex: 1;
					padding-left: 20rpx;
				}
			}

			.title {
				margin-bottom: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: bold;

				.sku {
					font-weight: normal;

					.ice {
						color: #26ACF5;
						margin: 0 10rpx;
					}
				}
			}

			.sku {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;

				.list {
					border-radius: 10rpx;
					background: #F6F6F6;
					margin: 20rpx;
				}
			}

			.guigebox {

				display: flex;
				align-items: center;
				justify-content: flex-start;
				height: 242rpx;
				/* 添加以下样式，禁止父级元素拦截触摸事件 */
				-webkit-overflow-scrolling: touch;


				.list {
					margin: 10rpx;
					width: 142rpx;
					border-radius: 12rpx;
					background: #fff;
					border: 2rpx solid #fff;
					flex-shrink: 0;

					image {
						width: 138rpx;
						height: 138rpx;
						border-radius: 12rpx 12rpx 0 0;
						display: inline-block;
					}

					.text {
						background: #F6F6F6;
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;
						text-overflow: ellipsis;
						border-radius: 0 0 12rpx 12rpx;
						padding: 0 8rpx;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
			}

			.bing {
				justify-content: space-between;

				.list {
					min-width: 170rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60rpx;
					padding: 20rpx 36rpx;
					margin: 0;
					margin-bottom: 20rpx;
				}
			}

			.active {
				background: rgba(234, 61, 55, 0.08);
				border: 2rpx solid #DB3E3F !important;
				color: #DB3E3F;
				font-weight: bold;

				view {
					color: #DB3E3F;
					background: rgba(234, 61, 55, 0.08);
				}
			}
		}

		.mall_info {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			padding-top: 40rpx;
			background: #fff;

			.infos {
				flex: 1;
				padding-left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.name {
					font-size: 28rpx;
					font-weight: bold;
				}

				.specs {
					color: #999;
					font-size: 24rpx;
				}

				.price {
					display: flex;
					align-items: flex-end;
					justify-content: flex-start;

					.big {
						font-size: 40rpx;
						color: #EA3D37;

						text {
							font-size: 24rpx;
						}
					}

					.small {
						font-size: 24rpx;
						color: #999999;
						text-decoration: line-through;

						text {
							font-size: 18rpx;
						}
					}
				}

				.sku_num {
					font-size: 24rpx;
					color: #999;
				}
			}

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}
		}
	}

	.shop_box {
		.tab_boxs {
			// position: sticky;
			// top: 0;
			// left: 0;
			// z-index: 20;
			// background: #f5f5f5;
			margin-top: 20rpx;
		}

		.commodity_box {
			padding: 30rpx 20rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.list {
				width: 344rpx;
				border-radius: 8rpx;
				padding: 12rpx;
				background: #FFFFFF;
				overflow: hidden;
				margin-bottom: 20rpx;

				.text_box {
					padding: 12rpx 0;
					position: relative;
					line-height: 2;
					padding-bottom: 0;

					.price_text {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.big {
							font-size: 40rpx;
							color: #EA3D37;

							text {
								font-size: 24rpx;
							}
						}

						.small {
							font-size: 24rpx;
							color: #999999;
							text-decoration: line-through;

							text {
								font-size: 16rpx;
							}
						}
					}

					.btn_boxs {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.addcart {
						width: 96rpx;
						height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 20rpx;
						background: #EA3D37;
						border-radius: 6rpx;

					}

					.name {
						font-size: 28rpx;
						width: 320rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.remake {
						font-size: 24rpx;
						color: #999;
					}

					.renzhen {
						font-size: 28rpx;
						color: #EA3D37;
					}
				}

				image {
					width: 320rpx;
					height: 248rpx;
					border-radius: 20rpx, 20rpx, 0rpx, 0rpx;

				}
			}
		}
	}

	.ad_box {
		width: 100%;
		height: 144rpx;
		margin-top: 20rpx;
		background: #EB473C;
		position: relative;
		padding: 14rpx 0;
		padding-left: 190rpx;
		border: 4rpx solid #ffdc96;
		border-radius: 8rpx;

		.right_box {
			height: 100%;

			.quan_big_box {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 484rpx;
				overflow-x: scroll;
				// display: flex;
				// align-items: center;
				// justify-content: flex-start;
				flex-wrap: nowrap;
			}

			.quan_box {
				width: 228rpx;
				height: 110rpx;
				flex: 1;
				border-radius: 10rpx;
				background: #FEF7EA;
				padding: 14rpx;
				margin-right: 10rpx;

				.money {
					font-size: 38rpx;
					color: #DB3E3F;

					text {
						font-size: 22rpx;
					}
				}

				.man {
					font-size: 20rpx;
					color: #DB3E3F;
					margin-top: 8rpx;
				}
			}
		}

		.left_box {
			position: absolute;
			left: 0;
			top: 0;
			width: 190rpx;
			height: 144rpx;
			text-align: center;
			padding-top: 20rpx;

			.money {
				font-size: 48rpx;
				color: #FEFAE7;

				text {
					font-size: 20rpx;
				}
			}

			.lq_btn {
				width: 116rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background: linear-gradient(to right, #ffeddf 0%, #ffdc96 100%);
				font-size: 20rpx;
				color: #DB3E3F;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 32rpx;
			}
		}

		image {
			width: 750rpx;
			height: 240rpx;
		}
	}

	.seckill_box {
		width: 710rpx;
		// height: 326rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		background: #EA3D37;
		padding: 10rpx;
		margin-top: -136rpx;
		position: relative;
		border: 4rpx solid #ffeddf;
		border-radius: 20rpx;

		.content {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 680rpx;
			overflow-x: scroll;
		}

		.list_box {
			width: 200rpx;
			margin: 20rpx 0;
			margin-right: 10rpx;
			border-radius: 10rpx;
			padding: 10rpx;
			background: #fff;

			.seckill_box_pay {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					padding: 4rpx 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 20rpx;
					background: #EA3D37;
					border-radius: 6rpx;
				}
			}

			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
				background: #ECECEC;
			}

			.goods_name {
				width: 180rpx;
				font-size: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.renzhen {
				color: #EA3D37;
				font-size: 24rpx;

				text {
					font-size: 20rpx;
				}
			}

			.small {
				color: #666;
				font-size: 20rpx;
				text-decoration: line-through;

				text {
					font-size: 16rpx;
				}
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			padding-top: 10px !important;

			image {
				width: 147rpx;
				height: 36rpx;
			}

			.title_btn {
				width: 80rpx;
				height: 28rpx;
				border-radius: 4rpx;
				background: #FCF0DB;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #E8443A;
				font-size: 20rpx;

			}
		}
	}

	.option_box {
		padding: 20rpx;

		.options {
			background: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			.option {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.list {
					font-size: 24rpx;
					text-align: center;

					.img_box {
						width: 90rpx;
						height: 90rpx;
						border-radius: 46rpx;
						background: url(https://img.js.design/assets/img/667d2c6dd157d6b0d4397a9a.png);
						overflow: hidden;

						image {
							width: 90rpx;
							height: 90rpx;
						}
					}

					.text {
						margin: 20rpx 0;
					}
				}
			}
		}

	}

	.hotZq {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.hot_right_box {
			width: 360rpx;
			height: 460rpx;

			.hot_right_swiper {
				height: 220rpx;
				border-radius: 10rpx;
				width: 360rpx;
				padding: 10rpx;
				padding-bottom: 0;
				background: #fff;

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// background: linear - gradient(to bottom, #fbe0e6, white);

					.txt {
						font-size: 28rpx;
						font-weight: bold;
					}

					.more {
						padding: 2rpx 4rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 18rpx;
						background: #EA3D37;
						border-radius: 6rpx;
					}
				}

				.swiper {
					height: 168rpx;
					margin-top: 2rpx;

					.swiper_item {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.swiper_item_goods {
							width: 148rpx;
							position: relative;

							.position_box {
								position: absolute;
								height: 28rpx;
								bottom: -10rpx;
								left: 0;
								display: flex;
								align-items: end;
								justify-content: space-between;

								.big_price {
									position: relative;
									background-color: red;
									color: white;
									font-size: 18rpx;
									padding: 2rpx;
									border-radius: 4rpx 0 0 4rpx;
								}

								.small_price {
									font-size: 14rpx;
									background: #f5f5f5;
									padding: 2rpx 4rpx;
									padding-left: 10rpx;
									border-radius: 4rpx;
									color: #666;
									text-decoration: line-through;
								}

								// .big_price::after {
								// 	content: "";
								// 	position: absolute;
								// 	top: 28rpx;
								// 	right: -24rpx;
								// 	border-radius: 0 4rpx 0 0;
								// 	/* 调整与主元素的距离 */
								// 	width: 0;
								// 	height: 0;
								// 	border-style: solid;
								// 	border-width: 0 0 28rpx 14rpx;
								// 	/* 调整倾斜角度和大小 */
								// 	border-color: transparent transparent red transparent;
								// 	transform: rotate(180deg);
								// 	/* 添加旋转属性，这里旋转45度，可按需调整 */
								// 	transform-origin: top left;
								// 	/* 设置旋转原点为左上角 */
								// }
							}

							image {
								width: 148rpx;
								height: 148rpx;
							}
						}
					}
				}
			}
		}

		.swiper_box {
			height: 460rpx;
			width: 340rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
	}


	.container {
		background: #F5F5F5;
	}

	// .top_bg_box:before {
	// 	content: '';
	// 	position: absolute;
	// 	top: 0;
	// 	left: -50%;
	// 	width: 200%;
	// 	height: 100%;
	// 	z-index: 0;
	// 	background: linear-gradient(180deg, #dd4c4d 0%, rgba(255, 228, 229, 1) 100%);
	// 	/* 背景颜色 */
	// 	border-bottom-left-radius: 50%;
	// 	border-bottom-right-radius: 50%;
	// }

	.top_bg_box {
		height: 444rpx;
		position: relative;
		background: linear-gradient(180deg, #dd4c4d 0%, #F5F5F5 100%);
	}

	.top_box {
		// background: #fff;
		padding: 20rpx;
		position: relative;
		padding-top: 26rpx;

		.search_box {
			width: 710rpx;
			margin: 0 auto;
			height: 60rpx;
			border-radius: 30rpx;
			background: #FFFFFF;
			// border: 2rpx solid #EA3D37;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 28rpx;
			padding-right: 4rpx;

			input {
				flex: 1;
				padding: 0 20rpx;
			}

			.search_button {
				width: 110rpx;
				height: 48rpx;
				border-radius: 24rpx;
				background: #EA3D37;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 24rpx;
			}
		}
	}
</style>